<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
        font-family: Arial, sans-serif;
        display: flex;
    }
    /* 侧边栏样式 */
    .sidebar {
        width: 220px;
        background-color: #2c3e50;
        color: #fff;
        display: flex;
        flex-direction: column;
        padding: 20px 10px;
        position: fixed;
        top: 0;
        bottom: 0;
    }

    .sidebar h2 {
        font-size: 18px;
        margin-bottom: 20px;
        text-align: center;
    }

    .sidebar ul {
        list-style: none;
        padding: 0;
    }

    .sidebar ul li {
        margin: 10px 0;
    }

    .sidebar ul li a {
        color: #fff;
        text-decoration: none;
        padding: 8px 10px;
        display: block;
        border-radius: 5px;
    }

    .sidebar ul li a:hover {
        background-color: #34495e;
    }

    /* 主内容区域样式 */
    .main-content {
        margin-left: 240px;
        flex-grow: 1;
        padding: 20px;
        background-color: #ecf0f1;
    }
    form {
        display: flex;
        flex-direction: column;
        margin: 20px auto;
    }
    .tabs button {
        flex: 1;
        padding: 10px 20px;
        border: none;
        background-color: #f5f5f5;
        cursor: pointer;
        outline: none;
    }

    .tabs button:hover {
        background-color: #e0e0e0;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    th, td {
        border: 1px solid #ddd;
        text-align: center;
        padding: 8px;
    }

    th {
        background-color: #f4f4f4;
    }

    .button {
        color: #fff;
        background-color: #3498db;
        border: none;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
    }

    .button:hover {
        background-color: #2980b9;
    }
</style>
<body>
<div class="sidebar">
    <h2>管理界面</h2>
    <ul>
        <li><a href="/index">网站</a></li>
    </ul>
    <ul>
        <li><a href="/databases">数据库</a></li>
    </ul>
</div>
<div class="main-content">
    <div class="tabs">
        <h2>执行SQL语句</h2>
    </div>
    <form action="/query" method="post">
        <textarea name="sql" id="sql" cols="30" rows="10" placeholder="请输入SQL语句"></textarea>
        <input type="hidden" name="databaseName" th:value="${databaseNameQuery}">
        <button type="submit" class="button">执行</button>
    </form>
    <table>
        <thead>
        <tr>
            <th>数据库名</th>
            <th>对应表名</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="table : ${allTables}">
            <td th:text="${databaseNameQuery}"></td>
            <td th:text="${table}">user</td>
        </tr>
        </tbody>
    </table>

</div>


</body>
</html>
